import { useEffect, useState } from 'react'
import './index.scss'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { interfacesGoods } from '../../interfaces/goods'
import copy from 'clipboard-copy'
import QRCode from 'qrcode.react'
import { message } from 'antd'
import { PayStatusMap } from '../../utils/global'

function Order() {
  const navigate = useNavigate()
  const [params] = useSearchParams()
  const id = params.get('id')
  const [paymentInfo, setPaymentInfo] = useState()

  useEffect(() => {
    if (id) {
      const params = {
        order_no: id
      }
      interfacesGoods.paymentInfo(params).then(res => {
        const { data } = res;
        setPaymentInfo(data);
      })
      }
  }, [id])

  // 复制支付地址
  const copyPayAddress = (text) => {
    copy(text).then(res => {
      message.success("copy success")
    });
  }

  const complete = () => {
    navigate('/person');
    window.scrollTo(0, 0);
  }

  const invite = () => {
    navigate(`/myInvite?id=${id}`);
    window.scrollTo(0, 0);
  }

  return (
    <div className='order'>
      <div className='title'>Order</div>
      <div className='table'>
        <div className='tr'>
          <div className='th'></div>
          <div className='th'>Order<br />number</div>
          <div className='th'>Product<br />Name</div>
          <div className='th'>Payment</div>
          <div className='th'>Unit price</div>
          <div className='th'>Specifications</div>
          <div className='th'>Quantity</div>
          <div className='th'>Additional<br />giveaways</div>
          <div className='th'>Total<br />amount</div>
          <div className='th'>Payment wallet<br />address</div>
          <div className='th'>Transfer<br />TXID</div>
          <div className='th'>Payment<br />status</div>
        </div>
        <div className='tr'>
          <div className='td'>
            <div className='goods-img'>
              <img className='img' alt='goods img' src={ paymentInfo?.order.cover_url } />
            </div>
          </div>
          <div className='td'>{ paymentInfo?.order.order_no }</div>
          <div className='td'>{ paymentInfo?.order.SkuName }</div>
          <div className='td'>{ paymentInfo?.order.currency }</div>
          <div className='td'>{ paymentInfo?.order.unit_amount }</div>
          <div className='td'>{ paymentInfo?.order.sku_specs[0].value }</div>
          <div className='td'>{ paymentInfo?.order.quantity }</div>
          <div className='td'>{ paymentInfo?.order.reward_number }</div>
          <div className='td'>{ paymentInfo?.order.total_amount }</div>
          <div className='td'>{ paymentInfo?.order.paying_account }</div>
          <div className='td'>{ paymentInfo?.order.reward_number }</div>
          <div className='td'>{ PayStatusMap[paymentInfo?.order.status] }</div>
        </div>
      </div>

      <div className='red-tip'>
        <div className='tip-title'>Please scan the payment QR code, or copy the payment ac ddress to complete the payment. Attention:</div>
        <div className='tip-content'>
          1. Please note to pay according to the selected payment grid. Using the wrong grid may resu ult in the<br />
          inability to receive and retrieve payments.<br />
          2. The delivery time is subject to on chain confirmation. If you have any questions, please co ontact<br />
          customer service.
        </div>
      </div>

      <div className='all-account'>{ paymentInfo?.payment_info.currency } { paymentInfo?.payment_info.amount }</div>
      <div className='wallet'>Current network Solana</div>
      <div className='qrcode'>
        <QRCode
          id="qrCode"
          value={paymentInfo?.payment_info.receiving_pubkey}
          size={160} // 二维码的大小
          fgColor="#000000" // 二维码的颜色
          style={{ margin: 'auto' }}
        />   
      </div>
      <div className='pay-address'>
        <div className='label'>Payment address</div>
        <div className='value'>
          <div className='address'>{ paymentInfo?.payment_info.receiving_pubkey }</div>
          <div className='copy-btn' onClick={() => copyPayAddress(paymentInfo?.payment_info.receiving_pubkey)}>Click to copy</div>
        </div>
      </div>

      <div className='opt'>
        <div className='complete' onClick={complete}>Complete</div>
        <div className='invite' onClick={invite}>Inviting friends to help increase volume<br />Enjoy up to 20% free gift</div>
      </div>

      <div className='bottom-box'></div>
    </div>
  )
}

export default Order